<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
		<title>Achieve D.C.</title>
		<link rel="stylesheet" type="text/css" href="../scripts/apps.css" />
		<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAMdZ1kWkB3KQ462dEaMDTuRTtCdA3KjGXvPP6zBktkHNt1wOcrBSbNnukPTrPfIXOzEHCjMpWENZXFA" type="text/javascript"></script>
	</head>
	<body onunload="GUnload()" marginheight="0" topmargin="0" vspace="0" marginwidth="0" hspace="0">
		<div id="header">
			<img src="images/title.png"><br />
		</div>
		<div id="container">
			<img src="images/test_scores.png"><img src="images/poverty.png"><br />
			<div id="map"></div>
			<div id="side_bar_top">
				<img src="images/display.png"><br />
<input type="checkbox" id="EBox" onclick="boxclick(this,'E')" /> Elementary School<br />
<input type="checkbox" id="NBox" onclick="boxclick(this,'N')" /> Middle School<br />
<input type="checkbox" id="HBox" onclick="boxclick(this,'H')" /> High School<br />
			</div>
			<div id="side_bar"></div>
			<div id="side_bar_bottom">
				<p>More info about Achieve D.C. <a href="http://achievedc.mapkist.com/about">here</a>.</p>
			</div>

			<div id="footer">
				<p>Achieve D.C. is brought to you by <a href="http://mapkist.com">MapKist.com</a>.</p>
			</div>

		</div>


		<script type="text/javascript">
			//<![CDATA[

			var marker_blue3 = new GIcon(); 
			marker_blue3.image = 'images/marker_blue3.png';
			marker_blue3.shadow = 'images/marker_blue3_shadow.png';
			marker_blue3.iconSize = new GSize(12, 20);
			marker_blue3.shadowSize = new GSize(22, 20);
			marker_blue3.iconAnchor = new GPoint(6,20);
			marker_blue3.infoWindowAnchor = new GPoint(5, 1);

			var marker_blue2 = new GIcon(); 
			marker_blue2.image = 'images/marker_blue2.png';
			marker_blue2.shadow = 'images/marker_blue2_shadow.png';
			marker_blue2.iconSize = new GSize(12, 20);
			marker_blue2.shadowSize = new GSize(22, 20);
			marker_blue2.iconAnchor = new GPoint(6,20);
			marker_blue2.infoWindowAnchor = new GPoint(5, 1);

			var marker_blue1 = new GIcon(); 
			marker_blue1.image = 'images/marker_blue1.png';
			marker_blue1.shadow = 'images/marker_blue1_shadow.png';
			marker_blue1.iconSize = new GSize(12, 20);
			marker_blue1.shadowSize = new GSize(22, 20);
			marker_blue1.iconAnchor = new GPoint(6,20);
			marker_blue1.infoWindowAnchor = new GPoint(5, 1);

			var gmarkers = [];
			var customIcons = [];

			customIcons["1"] = marker_blue1;
			customIcons["2"] = marker_blue2;
			customIcons["3"] = marker_blue3;


		if (GBrowserIsCompatible()) {


			var map = new GMap2(document.getElementById("map"));
			map.addMapType(G_PHYSICAL_MAP);
			map.enableScrollWheelZoom();
			map.addControl(new GLargeMapControl());
			map.addControl(new GScaleControl());
			map.addControl(new GMapTypeControl());
			map.setCenter(new GLatLng(38.900434, -77.017308), 12);

			var kml = new GGeoXml("http://achievedc.mapkist.com/tr11_d00.kml");
			map.addOverlay(kml);



			function createMarker(point, NAME, ADDRESS, CITY, STATE, MATH, READING, SCORE, TYPE, LEVEL, SCHOOL, PHONE, STUDENTS) {
				var marker = new GMarker(point,customIcons[LEVEL]);

				// === Store the category and name info as a marker properties ===                            
				marker.myName = NAME;
				marker.myAddress = ADDRESS;
				marker.myCity = CITY;
				marker.myState = STATE;
				marker.myMATH = MATH;
				marker.myREADING = READING;
				marker.myType = TYPE; 
				marker.myScore = SCORE;
				marker.myLevel = LEVEL;
				marker.mySchool = SCHOOL;
				marker.myPhone = PHONE;
				marker.myStudents = STUDENTS;
				var html = "<span class='school'>" + NAME + "</span><br /><br />" + "Math Score: " + MATH + "<br />" + "Reading Score: " + READING + "<br /><b>Overall Score: " + SCORE + "</b><br /><br />Total Students: " + STUDENTS;
				GEvent.addListener(marker, "click", function() {
					marker.openInfoWindowHtml(html);
				});
				gmarkers.push(marker);
				return marker;
			}


			// == shows all markers of a particular category, and ensures the checkbox is checked ==
			function show(SCHOOL) {
				for (var i=0; i<gmarkers.length; i++) {
					if (gmarkers[i].mySchool == SCHOOL) {
						gmarkers[i].show();
					}
				}
				// == check the checkbox ==
				document.getElementById(SCHOOL+"Box").checked = true;
			}


			// == hides all markers of a particular category, and ensures the checkbox is cleared ==
			function hide(SCHOOL) {
				for (var i=0; i<gmarkers.length; i++) {
					if (gmarkers[i].mySchool == SCHOOL) {
 						gmarkers[i].hide();
					}
				}
				// == clear the checkbox ==
				document.getElementById(SCHOOL+"Box").checked = false;
				// == close the info window, in case its open on a marker that we just hid
				map.closeInfoWindow();
			}


			// == a checkbox has been clicked ==
			function boxclick(box,SCHOOL) {
				if (box.checked) {
					show(SCHOOL);
				}
				else {
					hide(SCHOOL);
				}
				// == rebuild the side bar
				makeSidebar();
			}

			function myclick(i) {
				GEvent.trigger(gmarkers[i],"click");
			}


			// == rebuilds the sidebar to match the markers currently displayed ==
			function makeSidebar() {
				var side_bar_html = "";
				for (var i=0; i<gmarkers.length; i++) {
					if (!gmarkers[i].isHidden() && gmarkers[i].mySchool == 'E') {
						side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myName + '</a><br />&nbsp;&nbsp;' + gmarkers[i].myAddress + '<br /><br />';
					}
					else if (!gmarkers[i].isHidden() && gmarkers[i].mySchool == 'N') {
						side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myName + '</a><br />&nbsp;&nbsp;' + gmarkers[i].myAddress + '<br /><br />';
					}
					else if (!gmarkers[i].isHidden() && gmarkers[i].mySchool == 'H') {
						side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myName + '</a><br />&nbsp;&nbsp;' + gmarkers[i].myAddress + '<br /><br />';
					}
				}
				document.getElementById("side_bar").innerHTML = side_bar_html;
			}



			GDownloadUrl("achieve_to_xml.php", function(data) {
				var xmlDoc = GXml.parse(data);
				var markers = xmlDoc.documentElement.getElementsByTagName("marker");
          
				for (var i = 0; i
			< markers.length; i++) {
							var NAME = markers[i].getAttribute("NAME");
							var ADDRESS = markers[i].getAttribute("ADDRESS");
							var CITY = markers[i].getAttribute("CITY");
							var STATE = markers[i].getAttribute("STATE");
							var MATH = markers[i].getAttribute("MATH");
							var READING = markers[i].getAttribute("READING");
							var SCORE = markers[i].getAttribute("SCORE");
							var TYPE = markers[i].getAttribute("TYPE");
							var LEVEL = markers[i].getAttribute("LEVEL");
							var SCHOOL = markers[i].getAttribute("SCHOOL");
							var PHONE = markers[i].getAttribute("PHONE");
							var STUDENTS = markers[i].getAttribute("STUDENTS");
							var point = new GLatLng(parseFloat(markers[i].getAttribute("LATITUDE")),
							parseFloat(markers[i].getAttribute("LONGITUDE")));
							var marker = createMarker(point, NAME, ADDRESS, CITY, STATE, MATH, READING, SCORE, TYPE, LEVEL, SCHOOL, PHONE, STUDENTS);
							map.addOverlay(marker);
				}


				// == show or hide the categories initially ==
				show("E");
				show("N");
				show("H");

				// == create the initial sidebar ==
				makeSidebar();
			});
		}

		else {
			alert("Sorry, the Google Maps API is not compatible with this browser");
		}
	//]]>
		</script>

<!-- Start of StatCounter Code --><script type="text/javascript">var sc_project=3971278; var sc_invisible=1; var sc_partition=31; var sc_click_stat=1; var sc_security="01459533"; </script><script type="text/javascript" src="http://www.statcounter.com/counter/counter.js"></script><noscript><div class="statcounter"><a href="http://www.statcounter.com/free_hit_counter.html" target="_blank"><img class="statcounter" src="http://c.statcounter.com/3971278/0/01459533/1/" alt="hit counter html code" ></a></div></noscript><!-- End of StatCounter Code -->
	</body>
</html>